<template>
	<view style="position: relative;">
		<!-- #ifndef H5 -->
		<view class="topTitle" :style="{'height': actionHeight + 'px','background-color':actionClolor}">
			<view v-if="!customTitle" :style="{'height': (actionHeight - statusBarHeight) + 'px','width': '100%'}">
			</view>
			<view style="display: flex;flex-direction: column; width: 100%;">
				<view v-if="!customTitle" class="row verticalCenterInRow" :style="{'height': menuButtonHeight + 'px'}">
					<image v-if="showBackIcon" class="get-back" src="https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/get-back.png" @click="onBack"
						mode=""></image>
					<view :class="[!titleCenter ? 'center' : '']">
						<view class="titleText" :style="{'color':titleDColor}">{{pageTitle}}</view>
					</view>
					<view style="width: 36rpx;"></view>
				</view>
				<view v-if="customTitle" class="slotView">
					<slot name="title"></slot>
				</view>
			</view>
		</view>

		<view>
			<view>
				<slot></slot>
			</view>
		</view>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<image v-if="showBackIcon" class="get-back h5-get-back" src="https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/get-back.png" @click="onBack"
			mode=""></image>
		<!-- #endif -->
	</view>

</template>
<!-- |属性名称|类型|默认值|属性说明|
|:---|:---|:---|:---|
|titleColor|String|#000000|标题颜色，如'#ffffff',六位，千万别加透明度哦|
|actionBarColor|String|#ffffff|标题栏颜色，渐变的部分，和↑要求一样|
|pageTitle|String||标题文字内容|
|showBackIcon|Boolean|false|是否显示返回按钮，嫌丑可以自己去源码改|
|customTitle|Boolean|false|是否自定义标题栏，传true，即显示插值slot v-slot:title的内容|
|titleCenter|Boolean|true|标题是否居中，默认在居中|
|statusBarHeight|[String, Number]| 小程序状态栏高度| -->
<script>
	const app = getApp();
	export default {
		name: 'v-headerview',
		props: {
			titleColor: {
				type: String,
				default: '#000000'
			},
			actionBarColor: {
				type: String,
				default: '#ffffff'
			},
			pageTitle: {
				type: String,
				default: ''
			},
			showBackIcon: {
				type: Boolean,
				default: false
			},
			customTitle: {
				type: Boolean,
				default: false
			},
			titleCenter: {
				type: Boolean,
				default: false
			},
			//是否渐变
			isGradual: {
				type: Boolean,
				default: true
			},
			isBack: {
				type: Boolean,
				default: true
			},
			actionHeight: {
				type: [String, Number],
				// #ifdef H5
				default: 0
				// #endif

				// #ifndef H5
				default: 44
				// #endif

			},
			statusBarHeight: {
				type: [String, Number],
				default: 0
			},
			menuButtonHeight: {
				type: [String, Number],
				default: 0
			},
		},

		data() {
			return {
				// statusBarHeight: '',
				actionClolor: '#ffffff',
				titleDColor: ''
			}
		},
		created() {
			let that = this
			this.actionClolor = this.actionBarColor + '00'
			this.titleDColor = this.titleColor + '00'
		},

		mounted() {
			var that = this;
			if (!that.isGradual) {
				that.actionClolor = '#ffffff'
				that.titleDColor = '#000000'
				return
			}
			uni.$on('onPageScroll', function(data) { //接收参数
				if (data > 10) {
					if (data <= 255) {
						var alpha = (data).toString(16).split('.')[0]
						if (alpha.length == 1) {
							alpha = '0' + alpha
						}
						that.actionClolor = that.actionBarColor + alpha
						that.titleDColor = that.titleColor + alpha
					} else if (data > 255) {
						that.actionClolor = that.actionBarColor + 'ff'
						that.titleDColor = that.titleColor + 'ff'
					}
				} else {
					that.actionClolor = '#ffffff00'
					that.titleDColor = '#00000000'
				}
			});

		},
		methods: {
			onBack() {
				if (!this.isBack) {
					this.$emit('maskClose')
					return
				}
				uni.navigateBack({
					success: () => {
						uni.$emit('upNavigateBack')
					}
				})
			}

		}
	}
</script>
<style lang="scss">
	.row {
		display: flex;
		flex-direction: row;
	}

	.verticalCenterInRow {
		align-items: center;
		justify-items: center;
		display: flex;
		box-sizing: border-box;
		padding: 8rpx 30rpx 0;
	}

	.topTitle {
		/*  #ifdef MP  */
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		/*  #endif  */
		width: 100%;
	}

	.tileContent {
		bottom: 0;
	}

	.get-back {
		flex-shrink: 0;
		width: 36rpx;
		height: 36rpx;
	}

	.h5-get-back {
		position: fixed;
		top: 50rpx;
		left: 35rpx;
	}

	.titleText {
		font-weight: 900;
		font-size: 32rpx;
		// margin-left: 20rpx;
	}


	.scoll {
		height: calc(100vh);
	}

	.center {
		flex: 1;
		align-items: center;
		justify-content: center;
		display: flex;
	}

	.slotView {
		align-items: center;
		justify-content: center;
		display: flex;
	}

	/* CDN 服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
	@font-face {
		font-family: 'iconfont';
		/* Project id 4052467 */
		src: url('//at.alicdn.com/t/c/font_4052467_akm2gehw41.woff2?t=1683708618833') format('woff2'),
			url('//at.alicdn.com/t/c/font_4052467_akm2gehw41.woff?t=1683708618833') format('woff'),
			url('//at.alicdn.com/t/c/font_4052467_akm2gehw41.ttf?t=1683708618833') format('truetype');
	}

	.iconfont {
		font-family: "iconfont" !important;
		font-size: 16px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.icon-fanhui:before {
		content: "\e600";
	}
</style>